<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1 {
            width: 200px;
            height: 300px;
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <p class="p1">cdn: Content-Delivery-Network，即内容分发网络.将资源部署在不同的服务器上，
        来减少与用户之间的物理距离，并分散服务器压力，缩短响应时间。
        通常会将静态资源放在cdn上。
        静态资源就是：css 图片 视频 音频等
    </p>
    <ul class="ul" hidden>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="div-1"></div>
    <script src="./jquery.min.js"></script>

    <script>
        // jq选择元素的方式就是通过$(css)选择器来获取元素

        var content = '<mark>1111</mark>'
        $('.p1').html(content) // html方法 没有参数时会返回标签的内容 有参数时 会根据参数修改内容
        // $('.p1').text(content) // html方法 没有参数时会返回标签的内容 有参数时 会根据参数修改内容
        
        // eq(3) 就是选择符合条件的下标为3的元素  从0开始
        var li = $('li:eq(0)') 
        console.log(li.html());

        var ul = $('.ul');
        var div1 = $('.div-1');
        // ul.show(1000)
        // ul.toggle()  toggle 切换 本来显示现在就隐藏，本来隐藏现在就显示
        // fadeOut fadeIn  fadeToggle  淡入淡出 以及切换 
        div1.slideUp()
        // slideToggle slideUp  slideDown  卷起放下 以及切换
    </script>
</body>
</html>